<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
		<meta name="HandheldFriendly" content="true"/>
		<meta name="MobileOptimized" content="320"/>
		<title>Hello H5+</title>
		<script type="text/javascript" src="js/common.js"></script>
		<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
var server='http://192.168.1.214:8080/skin/add.action';
var files=[];
// 上传文件
function upload(){
	if(files.length<=0){
		plus.nativeUI.alert('没有添加上传文件！');
		return;
	}
	outSet('开始上传：');
	var wt=plus.nativeUI.showWaiting();
	var task=plus.uploader.createUpload(server,
		{method:'POST'},
		function(t,status){ //上传完成
			plus.nativeUI.closeWaiting();
			console.log(t.responseText);
			if(status==200){
				outLine('上传成功：'+t.responseText);
				mui.toast("照片上传成功，请耐心等候美容导师评测"); 
				plus.storage.setItem('uploader', t.responseText);
				// clicked('custom.html');
				var ws=plus.webview.currentWebview();
				console.log(ws);
				plus.webview.show("custom.html", "fade-in", 200);
				plus.webview.hide("uploader.html", "fade-out", 200);
			}else{
				outLine('上传失败：'+status);
				wt.close();
			}
		}
	);
	task.addData('client', 'runface');
	task.addData('uid', getUid());
	for(var i=0;i<files.length;i++){
		var f=files[i];
		task.addFile(f.path, {key:f.name});
	}
	task.start();
}
// 拍照添加文件
function appendByCamera(){
	plus.camera.getCamera().captureImage(function(p){
		appendFile(p);
	});	
}
// 从相册添加文件
function appendByGallery(){
	plus.gallery.pick(function(p){
        appendFile(p);
    });
}
// 添加文件
var index=1;
function appendFile(p){
	var fe=document.getElementById("files");
	var li=document.createElement("li");
	var n=p.substr(p.lastIndexOf('/')+1);
	li.innerText=n;
	fe.appendChild(li);
	files.push({name:"uploadkey"+index,path:p});
	index++;
	empty.style.display="none";
}
// 产生一个随机数
function getUid(){
	return Math.floor(Math.random()*100000000+10000000).toString();
}
		</script>
		<link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8"/>
		<link rel="stylesheet" type="text/css" href="css/mui.css"/>
		<style type="text/css">
			.mui-card-header > img:first-child {
				width: 100%;
				height: 100%;
			}
			.rf-help{
				width: 100%;
			}
			.rf-help div{
				float: left;
				width: 50%;
				background: #FFF;
				padding: 10px;
			}
			.rf-help > div{
				border-right: 1px solid #F2F2F2;
			}
			#output{
				display: none;
			}
			.mui-card-header:after, .mui-card-footer:before{
				height: 0px;
			}
		</style>
	</head>
	<body>
		<div class="mui-card">
			<div class="mui-card-header mui-card-media" style="width: 100%;">
				<img src="images/demo.jpg" >
			</div>
			<div class="mui-card-content">
				<div class="mui-card-content-inner">
					<p>请保持拍摄的照片中脸部占图片一半宽度</p>
				</div>
			</div>
		</div>
		
		
		<!-- <p class="heading">上传文件列表：</p> -->
		<ul id="files" style="text-align:left;" style="margin-top: 0px;">
			<p id="empty" style="font-size:12px;color:#C6C6C6;">尚未选择肤质测试照片</p>
		</ul>
		<table style="width:100%;">
			<tbody>
				<tr>
					<td style="width:40%"><div class="button button-select" onclick="appendByCamera()">拍照</div></td>
					<td style="width:40%"><div class="button button-select" onclick="appendByGallery()">相册选取</div></td>
				</tr>
			</tbody>
		</table>
		<br/>
		<div class="button" onclick="upload()">上 传</div>
		<br/>
		<center class="rf-help">
			<div style="" >测试技巧</div>
			<div style="float: left;width: 50%;">如何精准测试？</div>
		</center>
			
			
		
		<!-- <div id="outpos"></div> -->
		<div id="output" >

		</div>
	</body>
</html>